<template>
  <div id="container">地图加载中...</div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
let map: any = null;
const emit = defineEmits();
onMounted(() => {
  AMapLoader.load({
    key: "3a206906f31d0bacec5eeddf474dca7d", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 12, // 初始化地图级别
        center: [106.55, 29.57], // 初始化地图中心点位置
      });

      var geocoder = new AMap.Geocoder({
        city: "010", //城市设为北京，默认：“全国”
        radius: 1000, //范围，默认：500
      });
      var marker = new AMap.Marker(); //生成标记点对象
      // 地图点击事件
      map.on("click", function (e: { lnglat: { lng: number; lat: number } }) {
        // console.log(e);
        let { lng, lat } = e.lnglat;
        regeoCode([lng, lat]);
      });
      // 根据经纬度，解析得到地理位置信息（逆地理编码）
      function regeoCode(lnglat: [number, number]) {
        map.add(marker);
        marker.setPosition(lnglat); //向指定经纬度的位置显示marker点标记

        geocoder.getAddress(lnglat, function (status: any, result: any) {
          if (status === "complete" && result.regeocode) {
            var address = result.regeocode.formattedAddress; //将address交给父组件
            emit("update:modelValue", address);
            // console.log(result);
          } else {
            console.log("根据经纬度查询地址失败");
          }
        });
      }
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 400px;
  border: 1px solid red;
}
</style>
